<template>
  <div>
    <el-button type="primary" :icon="Plus" :disabled="!categoryStore.category3Id" @click="toAddSpuInfo">添加SPU</el-button>
    <el-table border v-loading="loading" :data="spuList" style="margin:10px 0">
      <el-table-column label="序号" align="center" type="index" width="90px"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-tooltip class="box-item" effect="dark" content="添加SKU" placement="top" >
            <el-button type="primary" size="small" :icon="Plus" @click="toAddSkuInfo(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="修改SPU" placement="top">
            <el-button type="primary" size="small" :icon="Edit" @click="toEditSpuInfo(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看SKU" placement="top" >
            <el-button type="info" size="small" :icon="InfoFilled" @click="toCheckSkulist(row.id)"></el-button>
          </el-tooltip>

          <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" title="真的要删除此属性吗?" @confirm="toDeleteSpuInfo(row.id)">
            <template #reference>
              <div style="display: inline-block;margin-left:10px">
                <el-tooltip class="box-item" effect="dark" content="删除Spu" placement="top">
                  <el-button type="danger" size="small" :icon="Delete"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3,5,10,20]" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      <el-dialog v-model="dialogSkuVisible" title="显示Sku列表">
      <el-table :data="skuList">
        <el-table-column property="skuName" label="名称" width="150" />
        <el-table-column property="price" label="价格" width="200" />
        <el-table-column property="weight" label="重量(千克)" />
        <el-table-column label="默认图片" >
          <template v-slot="{row}">
            <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg"  />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'SpuList'
});
</script>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { reqDeleteSpuInfo, reqGetSpuListData } from '@/api/product/spu';
import {reqGetSkuListData } from '@/api/product/sku';
import { ShowStatus } from '../types';
import { useCategoryListStore } from '@/stores/categorySelector';
import { ElMessage } from 'element-plus';
const categoryStore = useCategoryListStore();
const currentPage = ref<number>(1);
const pageSize = ref<number>(3);
const small = ref<boolean>(false);
const background = ref<boolean>(false);
const disabled = ref<boolean>(false);
const total = ref<number>(0);
const spuList = ref([]);
const loading = ref(false);
const dialogSkuVisible = ref(false)
const skuList = ref([])
const emits = defineEmits(['changeStatus', 'getSpuInfo']);

// 1. 获取spu列表数据
const getSpuList = async () => {
  loading.value = true;
  const result = await reqGetSpuListData(currentPage.value, pageSize.value, categoryStore.category3Id);
  // console.log('rr', result)
  loading.value = false;
  spuList.value = result.records;
  total.value = result.total;
};

// 2. 当三级导航选中的时候 发送请求 获取spuList列表数据
watch(
  () => categoryStore.category3Id,
  (newVal, oldVal) => {
    // if (!newVal) {
    //   spuList.value = []
    //   return // 阻止代码向下执行
    // }

    // 下面这一行与上面是等价的
    if (!newVal) return (spuList.value = []);

    getSpuList();
  },
  { immediate: true }
);

// 3. 当页面改变的时候
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  currentPage.value = val;
  getSpuList();
};

// 4. 当当前页码显示的数量变化时
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  getSpuList();
};

// 5. 去添加spuInfo 也就要跳转到spuForm页面
const toAddSpuInfo = () => {
  emits('changeStatus', ShowStatus.ADD_SPU);
  emits('getSpuInfo',{spuImageList:[],spuSaleAttrList:[]})
};
//去添加skuinfo的页面
const toAddSkuInfo =(skuInfo)=>{
  emits('getSpuInfo',skuInfo)
  emits('changeStatus',ShowStatus.ADD_SKU)
}
// 6. 去删除spuInfo数据
const toDeleteSpuInfo = async id => {
  await reqDeleteSpuInfo(id);
  ElMessage.success('删除spu数据成功了...');
  getSpuList();
};

// 7. 编辑spuInfo之数据回显
const toEditSpuInfo = spuInfo => {
  emits('getSpuInfo',{
    ...spuInfo,
    spuImageList:[],
    spuSaleAttrList:[]
  });
  // 得跳转到spuForm.vue页面
  emits('changeStatus', ShowStatus.ADD_SPU);
};
const toCheckSkulist =async(id:number)=>{
  console.log('111')
  const result =  await reqGetSkuListData(id)
  dialogSkuVisible.value= true
  skuList.value = result
}
</script>

<style scoped>
</style>